<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="description" content="克氏孤独症行为量表(CABS)评估报告，提供专业的评估结果分析，包括得分、结果解释和干预建议，帮助家长了解孩子的发展情况。">
        <meta name="keywords" content="克氏孤独症行为量表, CABS量表报告, 孤独症筛查报告, 儿童发展评估, 自闭症评估报告, 孤独症早期干预, 孤独症干预建议">
        <meta name="custom-image" content="https://totemlife.cn/apps/public/cabs-scale-cover.jpg">
        <script src="/apps/js/baidu-tongji-mtx.js"></script>
        <title>克氏量表评估报告</title>
        <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
        <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
        <style>
            /* 自定义橙色背景类 */
            .bg-orange {
                background-color: #fd7e14;
            }

            /* 页面样式 */
            body {
                background-color: #f8f9fa;
                padding-bottom: 60px;
            }

            footer {
                position: fixed;
                bottom: 0;
                width: 100%;
                background-color: rgba(15, 76, 129, 0.8);
                color: white;
                padding: 10px 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }

            /* 移动端优化 */
            @media (max-width: 576px) {
                /* 标题优化 */
                h1 {
                    font-size: 1.75rem;
                }

                h2 {
                    font-size: 1.5rem;
                }

                h5 {
                    font-size: 1.1rem;
                }

                /* 表格响应式优化 */
                .table-responsive {
                    font-size: 0.875rem;
                }

                /* 结果显示优化 */
                .display-1 {
                    font-size: 3.5rem;
                }

                /* 按钮优化 */
                .action-btns {
                    flex-direction: column;
                    width: 100%;
                }

                .action-btns .btn {
                    margin-bottom: 0.5rem;
                    width: 100%;
                }

                /* 图表容器优化 */
                .chart-container {
                    height: 200px !important;
                    margin-top: 1rem;
                }
            }

            /* 打印样式 */
            @media print {
                body {
                    background-color: #fff !important;
                }

                .container {
                    width: 100%;
                    max-width: 100%;
                    padding: 0;
                    margin: 0;
                }

                .card {
                    border: none !important;
                    box-shadow: none !important;
                }

                .card-body {
                    padding: 0 !important;
                }

                h1, .btn, .d-flex {
                    display: none !important;
                }

                #reportCard {
                    display: block !important;
                }

                footer {
                    display: none !important;
                }
            }
        </style>
    </head>
    <body>
        {{!-- 克氏孤独症行为量表评估报告页面 --}}
        <div class="container mt-4 mb-5">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h1>克氏量表评估报告</h1>
                        <div class="action-btns d-flex">
                            <button id="printReportBtn" class="btn btn-primary me-2">
                                <i class="fas fa-print"></i> 打印报告
                            </button>
                            <a href="/apps/scales/scales-dashboard" class="btn btn-outline-secondary me-2">
                                <i class="fas fa-th-large"></i> 量表工具
                            </a>
                            <a href="/apps/scales/cabs-scale/result/{{assessment.id}}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> 返回
                            </a>
                        </div>
                    </div>

                    <div class="card shadow-sm mb-4" id="reportCard">
                        <div class="card-body">
                            <div class="text-center mb-4 border-bottom pb-3">
                                <h2 class="mb-1">克氏孤独症行为量表(CABS)评估报告</h2>
                                <p class="text-muted">报告生成时间: {{formatDate assessment.assessment_date "YYYY-MM-DD HH:mm:ss"}}</p>
                            </div>

                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <h5>基本信息</h5>
                                    <table class="table table-bordered">
                                        <tr>
                                            <th style="width: 120px;" class="bg-light">姓名</th>
                                            <td>{{assessment.child_name}}</td>
                                        </tr>
                                        <tr>
                                            <th class="bg-light">年龄</th>
                                            <td>{{assessment.child_age}}岁</td>
                                        </tr>
                                        <tr>
                                            <th class="bg-light">性别</th>
                                            <td>{{assessment.child_gender}}</td>
                                        </tr>
                                        <tr>
                                            <th class="bg-light">评估人</th>
                                            <td>{{userInfo.real_name}}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <h5>评估结果</h5>
                                    <div class="text-center py-3 border rounded">
                                        <div class="display-1 fw-bold mb-2">{{assessment.total_score}}</div>
                                        <div class="fs-4 mb-2">
                                            <span class="badge {{#if (eq assessment.result_level '正常')}}bg-success{{else if (eq assessment.result_level '轻度')}}bg-warning{{else if (eq assessment.result_level '中度')}}bg-orange{{else}}bg-danger{{/if}} px-3 py-2">
                                                {{assessment.result_level}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <h5>详细评分</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead class="bg-light">
                                            <tr>
                                                <th style="width: 60%;">行为表现</th>
                                                <th style="width: 20%;" class="text-center">频率</th>
                                                <th style="width: 20%;" class="text-center">得分</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{#each questions}}
                                            <tr>
                                                <td>{{id}}. {{question_text}}</td>
                                                <td class="text-center">
                                                    {{#if (eq (lookup ../answers id) '0')}}
                                                        从不
                                                    {{else if (eq (lookup ../answers id) '1')}}
                                                        偶尔
                                                    {{else if (eq (lookup ../answers id) '2')}}
                                                        经常
                                                    {{else}}
                                                        未答
                                                    {{/if}}
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge {{#if (eq (lookup ../answers id) '0')}}bg-light text-dark{{else if (eq (lookup ../answers id) '1')}}bg-info{{else if (eq (lookup ../answers id) '2')}}bg-warning{{else}}bg-secondary{{/if}}">
                                                        {{#if (lookup ../answers id)}}
                                                            {{lookup ../answers id}}
                                                        {{else}}
                                                            未答
                                                        {{/if}}
                                                    </span>
                                                </td>
                                            </tr>
                                            {{/each}}
                                            <tr class="table-light">
                                                <th colspan="2" class="text-end">总分</th>
                                                <th class="text-center">{{assessment.total_score}}</th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="mb-4">
                                <h5>结果解释</h5>
                                <div class="p-3 border rounded">
                                    <p>{{assessment.result_description}}</p>

                                    <div class="mt-3">
                                        <h6>克氏量表分数解释：</h6>
                                        <ul>
                                            <li><strong>5分及以下：</strong>正常范围，无需特别关注。</li>
                                            <li><strong>6-10分：</strong>可能存在轻微的孤独症特征，建议密切观察孩子的发展情况。</li>
                                            <li><strong>11-20分：</strong>表现出中度孤独症特征，建议咨询专业医师进行进一步评估。</li>
                                            <li><strong>20分以上：</strong>表现出明显的孤独症特征，请尽快寻求专业医疗机构的诊断和干预。</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <h5>建议</h5>
                                <div class="p-3 border rounded">
                                    <p>{{suggestions}}</p>

                                    <div class="alert alert-info mt-3 mb-0">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>提示：</strong>早期干预对孤独症儿童的发展至关重要。如果您对孩子的发展有任何疑虑，请咨询专业医师或儿童发展专家。
                                    </div>
                                </div>
                            </div>

                            <div class="text-center mt-5 pt-3 border-top">
                                <p class="text-muted mb-0">本报告仅供参考，不能替代专业医疗机构的诊断</p>
                                <p class="text-muted mb-0">© {{currentYear}} 克氏孤独症行为量表(CABS)评估系统</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer>
            <div class="text-center">
                <a id="tmall-app-home-link" href="weixin://dl/business/?appid=wx1b441d1a37b278e1&path=pages/index/index&env_version=release" class="text-decoration-none">
                    <span id="tmall-app-home-title" style="color: white; font-size: 16px; margin-left: 5px;">
                        <i class="fa fa-house"></i> 广州图腾生命医学研究有限公司
                    <span>
                </a>
                &copy; {{currentYear}}
            </div>
        </footer>

        <!-- 将所有JS文件移到这里，并添加defer属性 -->
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
        <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
        <script src="/apps/js/wx-client-dom.js" defer></script>
        <script src="/apps/js/chart.js" defer></script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 打印报告
                document.getElementById('printReportBtn').addEventListener('click', function() {
                    window.print();
                });

                // 绘制行为特征图表（如果需要的话）
                // 这里可以添加图表绘制代码
            });
        </script>
    </body>
</html> 
